<template>
  <div class="show">
    <!-- 个人信息展示框 -->
    <h3>个人信息</h3>
    <el-form
      ref="form"
      :model="sizeForm"
      label-width="80px"
      size="mini"
      class="demo-ruleForm"
    >
      <el-form-item label="用户名">
        <el-input
          v-model="sizeForm.username"
          @blur="verifyUsername()"
        ></el-input>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input disabled v-model="sizeForm.name"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-input disabled v-model="sizeForm.gender"></el-input>
      </el-form-item>
      <el-form-item label="生日">
        <el-input v-model="sizeForm.birth"></el-input>
      </el-form-item>
      <el-form-item label="电话号码">
        <el-input v-model="sizeForm.phone"></el-input>
      </el-form-item>
      <el-form-item label="入职日期">
        <el-input disabled v-model="sizeForm.hiredate"></el-input>
      </el-form-item>

      <el-form-item size="large">
        <el-button type="primary" @click="onSubmit">保存</el-button>&nbsp&nbsp&nbsp
        <router-link to="/pharmacy">
        <el-button>取消</el-button>
        </router-link>&nbsp&nbsp&nbsp
        <el-button type="danger" @click="dialogFormVisible = true"
          >修改密码</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 弹出框 -->
    <el-dialog title="密码修改" :visible.sync="dialogFormVisible">
      <!-- 修改密码 -->
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="旧密码" prop="age">
          <el-input type="password" v-model.number="ruleForm.age"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="pass">
          <el-input
            type="password"
            v-model="ruleForm.pass"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input
            type="password"
            v-model="ruleForm.checkPass"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >提交</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  created() {
    let token_uername = JSON.parse(localStorage.getItem("user")).username;
    this.$axios
      .get(
        "http://localhost:8080/personals/showPersonalByName/" + token_uername
      )
      .then((src) => {
        this.sizeForm = src.data.data;
      });
  },
  data() {
    var checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("密码不能为空"));
      }
      setTimeout(() => {
        this.$axios
          .post("http://localhost:8080/personals/showPersonalByIdAndPass", {
            password: value,
            id: this.sizeForm.id,
          })
          .then((src) => {
            if (src.data.code == 200) {
              callback();
            } else {
              callback(new Error(src.data.msg));
            }
          });

        //   }
      }, 1000);
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    var username = (rule, value, callback) => {
      //   if (value === "") {
      // callback(new Error("请再次输入密码"));
      callback();
      //   }
    };
    return {
      dialogFormVisible: false,
      sizeForm: {},
      ruleForm: {
        pass: "",
        checkPass: "",
        age: "",
      },
      rules: {
        username: [{ validator: validatePass, trigger: "blur" }],
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
        age: [{ validator: checkAge, trigger: "blur" }],
      },
      username: true,
    };
  },
  methods: {
    // 验证用户名是否已经存在
    verifyUsername() {
      // alert(111)
      this.username = false;
      this.$axios
        .get(
          "http://localhost:8080/personals/findByUsername/" +
            this.sizeForm.username
        )
        .then((src) => {
          if (src.data.code == 200) {
            this.username = true;
          } else {
            alert(src.data.msg);
          }
        });
    },
    // 保存更改的信息
    onSubmit() {
      //   console.log("submit!");
      if (this.username) {
        this.$axios
          .put("http://localhost:8080/personals/updatePersonal", this.sizeForm)
          .then((src) => {
            if (src.data.code == 200) {
              this.$message({ message: src.data.msg, type: "success" });
            //   更新数据
              this.$axios
                .get(
                  "http://localhost:8080/personals/showPersonalByName/" +
                    this.sizeForm.username
                )
                .then((src) => {
                  this.sizeForm = src.data.data;
                });
            } else {
              this.$message.error(src.data.msg);
            }
          });
      } else {
        alert("用户名重复");
      }
    },
    // 提交密码修改
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios
            .put("http://localhost:8080/personals/updateNewPass", {
              password: this.ruleForm.pass,
              id: this.sizeForm.id,
            })
            .then((src) => {
              if (src.data.code == 200) {
                this.$message({ message: src.data.msg, type: "success" });
              } else {
                this.$message.error(src.data.msg);
              }
              this.dialogFormVisible = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>
<style lang="less" scoped>
.show {
  width: 400px;
  height: 450px;
  padding: 20px;
  margin: 100px auto;
  border-radius: 10px;
  border: 1px solid #eee;
  background-color: rgba(222, 222, 221, 0.5);
}
</style>
